<template>
  <div class="table">
    <el-table
      style="width: 100%"
      v-bind="tableProps"
    >
      <el-table-column
        v-for="col in columns"
        :key="col.prop"
        v-bind="col"
      >
        <template v-if="col.slotName" v-slot="scope">
          <slot
            :name="col.slotName"
            :row="scope.row"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="pagination"
      v-on="paginationEvents"
      v-bind="paginationProps"
    />

  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    // 表格配置
    tableProps: {
      type: Object,
      default: ()=> ({
        data: []
      })
    },
    pagination: {
      type: Boolean,
      default: true
    },
    // 分页配置
    paginationProps: {
      type: Object,
      default: () => ({
        currentPage: 1,
        pageSize: 10,
        pageSizes: [5, 10, 15, 20],
        layout: 'sizes, prev, pager, next, jumper, total',
        total: 0
      })
    },
    paginationEvents: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="less" scoped>

</style>
